<template>
  <div :id="id"></div>
</template>
<script>
export default {
  data() {
    return {
      chart: null,
    }
  },
  props: {
    id: {
      type: String,
      required: true,
      default: 'chartRate',
    },
    tips: {
      type: [Number, String],
      default: '50',
    },
    colorObj: {
      type: Object,
      default: function () {
        return {
          textStyle: '#3fc0fb',
          series: {
            color: ['#00bcd44a', 'transparent'],
            dataColor: {
              normal: '#03a9f4',
              shadowColor: '#97e2f5',
            },
          },
        }
      },
    },
  },
  mounted() {
    this.showEcharts1()
  },
  created() {},
  methods: {
    showEcharts1() {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      let tips = this.tips
      let option = {
        title: [
          {
            text: tips + '%',
            x: 'center',
            y: 'center',
            textStyle: {
              color: this.colorObj.textStyle,
              fontSize: 16,
            },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['85%', '75%'],
            center: ['50%', '50%'],
            // hoverAnimation: false,
            color: this.colorObj.series.color,
            label: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: tips,
                itemStyle: {
                  normal: {
                    color: this.colorObj.series.dataColor.normal,
                    shadowBlur: 10,
                    shadowColor: this.colorObj.series.dataColor.shadowColor,
                  },
                },
              },
              {
                value: 100 - tips,
              },
            ],
          },
        ],
      }
      this.chart.setOption(option)
    },
    refresh(tips) {
      let option = this.chart.getOption()
      option.title[0].text = tips + '%'
      option.series[0].data[0].value = tips
      this.chart.setOption(option)
    },
  },
}
</script>
<style scoped>
#echarts11,
#echarts12 {
  height: 100%;
  pointer-events: all;
}
</style>
